<template>
    <div ref="flyMaskRef" class="mask" :style="getStyle" @click="closePrevew">
        <img ref="flyImgRef" class="kl-prevew-img" :src="imgUrl" :style="getImgStyle" />
    </div>
</template>

<script>
export default {
    props: {
        el: {
            type: Object,
            required: true,
        },
        transitionTime: {
            type: Number,
            default: 0.5,
        },
        flyImgClassflyImgClass: {
            type: String,
            default: '',
        },
        zIndex: {
            type: Number,
            default: 1000,
        },
    },

    data() {
        return {
            top: 0,
            left: 0,
            left_old: 0,
            top_old: 0,
            width_old: 0,
            height_old: 0,
            imgUrl: '',
            visibility: '',
        }
    },
    computed: {
        getStyle() {
            const { zIndex, transitionTime } = this
            return {
                zIndex: zIndex - 1,
                transition: `all ${transitionTime}s`,
            }
        },
        getImgStyle() {
            const { top, left, width, height,zIndex, transitionTime } = this
            return {
                width,
                height,
                position: 'fixed',
                top: 0 + 'px',
                left: 0 + 'px',
                transform: `translate(${left}px, ${top}px)`,
                zIndex,
                transition: `all ${transitionTime}s`,
                borderRadius: '5px',
                boxShadow: '0 0 5px #999',
                cursor: 'zoom-out',
                objectFit: 'cover',
            }
        },
    },
    mounted() {
        // 获取
        if (!this.el) return
        // 获取图片链接
        this.imgUrl = this.el.getAttribute('src')
        if (!this.imgUrl) return
        // 保留原来的样式
        let { visibility } = this.el.style
        this.visibility = visibility
        this.el.style.visibility = 'hidden'
        // 获取el的宽高
        let { width: width_old, height: height_old } = window.getComputedStyle(this.el)
        // 获取el在可视区的位置
        let { top, left } = this.el.getBoundingClientRect()
        Object.assign(this, {
            top,
            left,
            width: width_old,
            height: height_old,
            left_old: left,
            top_old: top,
            width_old,
            height_old,
        })
        // 获取可视区宽高
        let { clientHeight, clientWidth } = document.documentElement
        this.$nextTick(() => {
            this.$refs.flyImgRef.onload = () => {
                // 限制宽高不能超出可视区的95%，且图片不能变形，需要完整展示
                let maxWidth = clientWidth * 0.95
                let maxHeight = clientHeight * 0.95
                let { naturalWidth: width, naturalHeight: height } = this.$refs.flyImgRef
                let ratio = width / height
                if (width > maxWidth) {
                    width = maxWidth
                    height = width / ratio
                }
                if (height > maxHeight) {
                    height = maxHeight
                    width = height * ratio
                }
                // 计算新的位置
                let newTop = (clientHeight - parseInt(height)) / 2
                let newLeft = (clientWidth - parseInt(width)) / 2
                this.left = newLeft
                this.top = newTop

                this.width = width + 'px'
                this.height = height + 'px'
            }
        })
    },
    methods: {
        closePrevew() {
            const { width_old, height_old, left_old, top_old, transitionTime } = this
            Object.assign(this, {
                width: width_old,
                height: height_old,
                left: left_old,
                top: top_old,
            })
            let timer = setTimeout(() => {
                this.el.style.visibility = this.visibility
                clearTimeout(timer)
                timer = null
                this.$emit('closed')
            }, transitionTime * 1000)
        },
    },
}
</script>

<style lang="scss" scoped>
.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    cursor: zoom-out;
}
</style>
